<template>
  <transition name="showBigImage">
    <v-touch
      v-if="showBig"
      v-on:swipeleft="leftChangeImg"
      v-on:swiperight="rightChangeImg"
      @tap="clickSmall($event)"
      class="PreImage"
    >
      <img
        :src="getImgSrc()"
        class="bigImg"
        alt=""
      >
      <slot name="deleteIcon" />
    </v-touch>
  </transition>
</template>

<script>
import VueTouch from 'vue-touch';

Vue.use(VueTouch, { name: 'v-touch' });
export default {
  name: 'PreImage',
  props: {
    imageItem: {
      type: Object,
      default: () => { },
    },
    show: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      showBig: false,
    };
  },

  watch: {
    show(nv) {
      this.showBig = nv;
    },
  },

  methods: {
    // 获取图片路径
    getImgSrc() {
      return JE.getFileUrl(this.imageItem.path, 'down') || this.imageItem.src || this.imageItem.showsrc;
    },
    // 点击缩小
    clickSmall() {
      setTimeout(() => {
        this.$emit('scaleImg');
      }, 10);
    },
    leftChangeImg() {
      this.$emit('left-swipe');
    },
    rightChangeImg() {
      this.$emit('right-swipe');
    },
  },
};
</script>
<style lang="less" scoped>
@import "~@/theme/index.less";
.showBigImage-enter-active {
  opacity: 1;
  transition: all 1s;
  background: rgba(7, 17, 27, 0.8);
}
.showBigImage-leave-active {
  opacity: 0;
  transition: all 1s;
  background: rgba(7, 17, 27, 0);
}
.showBigImage-enter {
  opacity: 0;
  background: rgba(7, 17, 27, 0);
}
.showBigImage-leave {
  opacity: 1;
  background: rgba(7, 17, 27, 0.8);
}
.PreImage {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  overflow-y: scroll;
  img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80%;
  }
  .jeicon-trash-o {
    position: fixed;
    bottom: 30 * @hd;
    left: 20 * @hd;
    z-index: 100;
    color: #fff;
    font-size: 20 * @hd;
  }
}
</style>
